<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙虾直播</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://wanjia.mcooz.com/views/mobile_basic/skin/default/css/mobile.css" />
    <link rel="stylesheet" href="themes/orange.min.css" />
  
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/jquery/jquery-1.11.3.min.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://wanjia.mcooz.com/views/mobile_basic/javascript/mobile.js"></script>
    <link rel="stylesheet" href="http://wanjia.mcooz.com/views/mobile_basic/skin/default/css/index.css" />
      <link href="font/css/font-awesome.css" rel="stylesheet">
      <script type="text/javascript" charset="UTF-8" src="http://www.mcooz.com/PUBLIC/artTemplate/artTemplate.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://www.mcooz.com/PUBLIC/artTemplate/artTemplate-plugin.js"></script>
    <script type="text/javascript" src="http://wanjia.mcooz.com/views/mobile_basic/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="./script/api.js"></script>


    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/form/form.js"></script>
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/autovalidate/validate.js"></script>
    <link rel="stylesheet" type="text/css" href="http://wanjia.mcooz.com/runtime/_systemjs/autovalidate/style.css" />
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artdialog/artDialog.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artdialog/plugins/iframeTools.js"></script><link rel="stylesheet" type="text/css" href="http://wanjia.mcooz.com/runtime/_systemjs/artdialog/skins/aero.css" />
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artTemplate/artTemplate.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artTemplate/artTemplate-plugin.js"></script>

  <script type="text/javascript" src="./script/jquery.mCustomScrollbar.concat.min.js"></script>
        <script type="text/javascript" src="./script/touch.min.js"></script>

<link rel="stylesheet" type="text/css" href="./htmlstyle.css" />
 <link rel="stylesheet" type="text/css" href="./css/jquery.mCustomScrollbar.css" />
     <style>
#header ul li.active {
  display: block;
}
#footer ul li.active a {
  color:#ff7700;

}
#footer ul li.active .ui-btn-icon-top:after {
  
  background-color: #ff7700;
}
#footer ul li.active a{
  background-color: #ececec;
}
.border-t, .border-b {
  position: relative;
}
#header ul li {
  color: #fff;
  display: none;
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
}
.kros_header{

}
.left{float: left;}
.js-search-text{
  width: 70%;
position: absolute;
left: 23px;
top: 3px;
height: 20px;
font-size: 16px;
}
input,button,select,textarea{outline:none;border: none;}
     </style>
</head>
<body>
<div data-role="page" class="content">

            <div data-role="header" id="header" class="kros_header" data-position="fixed">
        <a href="#kros_panel" id="back" data-rel="back" class="ui-btn-left ui-btn-corner-all ui-btn ui-icon-home ui-btn-icon-notext ui-shadow">Back</a>
        <a onclick="goToPage('./html/search.html');" id="search" data-ajax="false" class="ui-btn ui-btn-letf  ui-btn-corner-all ui-btn-icon-notext  ui-icon-clock ui-shadow">search</a>
        <ul>
            <li class="border-b active" id="fvh1" ></li>
            <li class="border-b" >直播</li>
            <li class="border-b" >关注</li>
            <li class="border-b" >我</li>
             <li class="border-b" >排行榜</li>
             <li class="border-b" >消息</li>
             <li class="border-b" >活动</li>
             <li class="border-b" >全部直播</li>
              <li class="border-b" >我的收益</li>
              <li class="border-b" >我的虾球</li>
              <li class="border-b" >我的等级</li>
              <li class="border-b" >申请认证</li>
              <li class="border-b" >关于我们</li>
              <li class="border-b" >设置</li>
            </ul>
        </div>
    <style>
.col-md-10.col-xs-10.column.left.pd5 > div {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-md-10.col-xs-10.column.left.pd5 {
    padding-left: 0;
}

.slides img {
    min-height: 190px;
    width: 100%;
}

.text-area {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

#kros_header {
    display: none;
}

#loading {
  margin: 50px auto 0;
  width: 100%;
  padding-left: 42%;
}
#loading i{
    color:#ff7700;
}

.col-md-6.col-xs-6.kros_overfollow {
  padding-left: 3px;
  padding-right: 3px;
}
.kros_img{
    height:95px;
       -moz-border-radius: 8px; 

    -webkit-border-radius: 8px; 

    border-radius:8px;   
}
.kros_overflow{
     border: 1px solid #000000;

  
}

.room-mes .btn-group .focus-box .follow-btn {
  background-color: #f70;
  border: 1px solid #e5e5e5;
  border-radius: 18.5px 0 0 18.5px;
  color: #fff;
  height: 25px;
  line-height: 25px;
  width: 69px;
}
#target{
     display: block;
}
.scan{
  background-image: url("image/scan.png");
  background-repeat: no-repeat;
  background-position: 2px 2px;
  background-size: 16px 16px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  margin-top: 3px;
   margin-right: 3px;
}

.input{
  background-color: #fff;
  width: 58%;
 height: 25px;
 position: absolute;
 border-radius: 3px;
   background-image: url("image/search.png");
  background-repeat: no-repeat;
  background-position: 3px 5px;
  background-size: 16px 16px;
  color: #ff7700;
}
.right{float: right;}
.aui-col-xs-2{
  height: 18px;
  border-left:1px solid #555;width:6px;float:right;margin-top:4px
}
</style>

<div role="main" id="target">
    
</div>




<div data-role="footer"  id="footer" data-position="fixed" style="background-color: #fcfcfc;border-width:0" data-theme="c">
    <div data-role="navbar" data-grid="c"  data-position="fixed" style="background-color: #fcfcfc;border-color:#fcfcfc;border:none;border-top:1px solid #dddddd">
        <ul>
            <li tapmode onclick="randomSwitchBtn( this );" class="flex-con active"><a    data-ajax="false" style="border-color:#fcfcfc;border:none"  data-icon="home" >首页1</a></li>
              <li tapmode onclick="randomSwitchBtn( this );" class="flex-con"><a     data-ajax="false" style="border-color:#fcfcfc;border:none" data-icon="video"  >直播</a></li>
            <li tapmode onclick="randomSwitchBtn( this );" class="flex-con"><a  ata-ajax="false" style="border-color:#fcfcfc;border:none" data-icon="heart" data-theme="">关注</a></li>
            <li tapmode onclick="randomSwitchBtn( this );" class="flex-con"><a  data-icon="user" style="border-color:#fcfcfc;border:none"  >我的</a></li>
           
        </ul>
    </div>
</div>


</div>







<script type='text/html' id='userCenterTemplate'>
 <div class="ui-panel-inner"><ul data-role="listview" data-theme="b" class="kros_view ui-listview ui-group-theme-b">
            <li class="ui-first-child"><a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user" href="ucenter.html"><%=username%>的个人中心</a></li>
            <li><a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-heart" href="favorite.html" data-transition="slidefade">我的关注</a></li>
      
            <li><a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-power" id="log_out" onclick="log_out();">安全退出</a></li>
            <li class="ui-last-child"> <a data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-minus" href="#demo-links" data-rel="close">关闭</a></li>
        </ul></div>

    </script>

<script type='text/html' id='logTemplate'>
    <div class="ui-panel-inner"><div class="row clearfix">
            <div class="col-md-12 column">
                <h1 class="text-center">
                    龙虾直播                    </h1>
            </div>
        </div><div class="row clearfix">
            <div class="col-md-12 column">
            
                    <div class="form-group">
                        <div class="ui-input-text ui-body-inherit ui-shadow-inset"><input data-corners="false" class="form-control" name="username" id="username" placeholder="用户名" type="text"></div>
                    </div>
                    <div class="form-group">
                        <div class="ui-input-text ui-body-inherit ui-shadow-inset"><input data-corners="false" class="form-control" name="password" id="password" placeholder="密码" type="password"></div>
                    </div>
                    <button type="submit" id="submit" onclick="login();" data-corners="false" class="btn  ui-btn ui-shadow">登录</button>
            
                <h5 class="text-center">
                    <a href="reg.html" data-transition="slide" data-ajax="false" class="ui-link">还没有账号?点此注册</a>
                    </h5>
            </div>
        </div></div>
 </script>

<script type='text/html' id='loadingTemplate'>
<div id="loading">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

</div>
</script>

</body>
</html>
<script type="text/javascript" src="http://wanjia.mcooz.com/views/mobile_basic/javascript/scoll.js"></script>
<script>


//页面跳转函数
function goToPage(page){
         api.openWin({
                                        name: 'live',
                                        url: page,
                                        pageParam: {
                                            name: 'test'
                                        },
                                      animation:  {
                                        type:"push",                //动画类型（详见动画类型常量）
                                        subType:"from_right",       //动画子类型（详见动画子类型常量）
                                        duration:100                //动画过渡时间，默认300毫秒
                                    }

                                });
         }


function login () {  

                var submit = $api.dom('#submit');
                var username;
                var password ;    

                username= $api.dom('#username');
                password = $api.dom('#password');
                username=$api.val(username);
                password=$api.val(password);


if (''==username||''==password) {
    alert("用户名或者密码不能为空")
} else{


url = 'http://www.mcooz.com/Login/login_act_app';
api.ajax({
            url: url,
            method: 'post',
            data: {
                values: {
                    username: username,
                    password:password
                }
            }
        }, function(json, err) {

           // alert(json.user_id);
                    if (json.status!=10) {
                                if (json.status==1) {

                                    $api.setStorage('userArr', json);
                                    $api.setStorage('uid', json.user_id);
                                    $api.setStorage('token', json.token);
                                    uid= $api.getStorage('uid');
                                    token= $api.getStorage('token');
                                    userArr= $api.getStorage('userArr');

                                    id=userArr.user_id;
                                    username=userArr.username;
                                   // alert(username);

                                     var userCenterHtml = template.render('userCenterTemplate',json);




                                $('#kros_panel').empty().append(userCenterHtml);


                                }
                                else{
                                    alert(json.message)


                                }

            ;

                          }else{

                                    alert(json.message)
                          }


        });

};





}


function log_out () {  

 var log_out = $api.dom('#log_out');

$api.setStorage('userArr', '');

url = 'http://www.mcooz.com/Login/logout_app';
api.ajax({
            url: url,
            method: 'post',
            data: {
                values: {
                    username: "a",
                   
                }
            }
        }, function(json, err) {

           // alert(json.user_id);

            if (json.status==11) {


                    var logHtml = template.render('logTemplate',json);



                    $('#kros_panel').empty().append(logHtml);


            };

      

        });
}





var url = 'http://www.mcooz.com/index/krosCategoryList';
 

var appId = "A6948423168911";

var mkeyTime=new Date().getTime();
 apiready = function(){


  html='<div class="left"><div class="left"><div class="left">龙虾直播</div><div class="left input " id="input" ><input class="js-search-text" placeholder="搜索房间/主播" type="text"><div class="right scan"></div><div class="aui-col-xs-2" style=""></div></div></div></div>'
  $('#back').remove();
$('#fvh1').empty().append(html);
 var winWidth = api.winWidth;
var winHeight = api.winHeight;


// $(".content").css({ width:winWidth,height:winHeight});

// $(".content").mCustomScrollbar({
//     callbacks:{
//         onScroll:function(){
//             myCustomFn(this);
//         }
//     }
// });

function myCustomFn(el){
    //alert(1);
}
 


        var header = $api.byId('header');
        $api.fixStatusBar(header);
        var  top=$api.dom('.border-b').offsetTop+3;
        $("#back,#search").css({ top:top});
        kds=75;
        tk=5
        $("#input").css({ top:tk});
        $("#input").css({ left:kds});








funIniGroup();
     
api.setFrameAttr({
    name: 'frame0',
    bounces: false
});

api.setFrameAttr({
    name: 'frame8',
    bounces: false
});

     api.addEventListener({
                name:"keyback"       
        },function(ret,err){
                if((new Date().getTime() - mkeyTime) > 2000){
                 mkeyTime = new Date().getTime();
                        api.toast({
                    msg: '再按一次退出程序',
                    duration:2000,
                    location: 'bottom'
                        });
                }else{
                        api.closeWidget();
                }
        
        });

};


 function funIniGroup(){
     var eHeaderLis = $api.domAll('#header li');
       var winHeight = api.winHeight;
       h=winHeight-$api.dom('#header').offsetHeight-$api.dom('#footer').offsetHeight
            frames = [];
        for (var i = 0,len = eHeaderLis.length; i <len; i++) {
                frames.push( { 
                    name: 'frame'+i, 
                    url: './html/frame'+i+'.html', 
                    bgColor : 'rgba(0,0,0,.2)',
                    bounces:true,
                     scrollEnabled:false,  
                } )
        }
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0, 
                y: $api.dom('#header').offsetHeight-1, 
                w: api.winWidth, 
                h: h
            },
            index: 0,
            frames: frames
        }, function (ret, err) {

         // alert( ret.index)
            index=ret.index
            xshowShow(index)

        });
    }

  function xshowShow(id) {
 var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#header li');

                if(id==1){
              api.setFrameGroupAttr({
              name: 'group_',
              hidden: false
              });

        }
        else{
              api.setFrameGroupAttr({
              name: 'group_',
              hidden: true
              });
        }

                    for(i = 0;i <= eHeaderLis.length;i++) {
                    if(i == id){
               $api.addCls( eHeaderLis[i], 'active');
               $api.addCls( eFootLis[i], 'active');
                    continue;
                    }try {
                    $api.removeCls(eHeaderLis[i], 'active');
                    $api.removeCls(eFootLis[i], 'active');

                    }catch(e){
                    return true;
                    }
                    }
                    }


       // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if( tag == $api.dom('#footer li.active') )return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#header li'),
            index = 0;
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                index = i;
                    if(index==1){
              api.setFrameGroupAttr({
              name: 'group_',
              hidden: false
              });

        }
        else{
              api.setFrameGroupAttr({
              name: 'group_',
              hidden: true
              });
        }
            }else{
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls( eFootLis[index], 'active');
        $api.addCls( eHeaderLis[index], 'active');
        if(index==0){
          
  html='<div class="left"><div class="left"><div class="left">龙虾直播</div><div class="left input " id="input" ><input class="js-search-text" placeholder="搜索房间/主播" type="text"><div class="right scan"></div><div class="aui-col-xs-2" style=""></div></div></div></div>'
  $('#back').remove();
$('#fvh1').empty().append(html);
     kds=75;
        tk=5
        $("#input").css({ top:tk});
        $("#input").css({ left:kds});

        }

    
        api.setFrameGroupIndex({
            name: 'group',
            index: index,         


        });
    }

    function kros(){

      alert(1)
    }


 
  
</script>